<template>
  <div class="comfire" v-if="confireList && moneyList">
    <div class="container">
      <van-tabs v-model="active" @disabled="onClickDisabled">
        <van-tab title="快递配送">
          <div class="currentAddress">
            <van-cell center is-link @click="showAddressList">
              <template #title>
                {{ currentContact.name }}
                {{ currentContact.tel }}
              </template>
              <template #label>
                <span v-if="currentContact.isDefault" class="current-default"
                  >[默认]</span
                >
                {{ currentContact.address }}
              </template>
            </van-cell>
          </div>
        </van-tab>
        <van-tab title="到店自提" disabled></van-tab>
      </van-tabs>
    </div>

    <van-action-sheet v-model="showaddress" title="选择地址">
      <div class="content">
        <div class="addressList">
          <van-address-list
            v-model="chosenAddressId"
            @select="changeAddress"
            :list="list"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
          />
        </div>
      </div>
    </van-action-sheet>

    <van-action-sheet v-model="editaddress" title="新增地址">
      <div class="editaddress">
        <van-address-edit
          :area-list="areaList"
          :address-info="addressInfo"
          show-delete
          show-set-default
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="delAddressInfo"
        />
      </div>
    </van-action-sheet>

    <div class="goodCount">共{{ confireList.length }}件商品</div>

    <div class="vanCard">
      <van-card
        v-for="item in confireList"
        :key="item.id"
        :num="item.cart_num"
        :price="item.truePrice"
        :desc="item.productInfo.attrInfo.suk"
        :title="item.productInfo.store_name"
        :thumb="item.productInfo.image"
      />
    </div>

    <div class="cell">
      <van-cell title="优惠卷" value="请选择" is-link @click="showDiscount" />
      <van-action-sheet v-model="showdiscount" title="优惠卷">
        <div class="discount">
          <img src="../../src/assets/noCoupon.png" alt="" />
        </div>
      </van-action-sheet>
      <van-cell title="积分抵扣" class="jf">
        <template #default>
          <div>
            当前积分<span class="jifen">{{ userInfo.integral }}</span>
          </div>
          <div>
            <van-checkbox v-model="jifen" @change="jiFenChange"></van-checkbox>
          </div>
        </template>
      </van-cell>
      <van-cell title="会员优惠" :value="vipDiscount" />
      <van-cell title="快速费用" :value="moneyList.pay_postage" />
      <van-field
        v-model="liuyan"
        rows="2"
        autosize
        label="备注信息"
        type="textarea"
        maxlength="150"
        placeholder="请添加备注(150字以内)"
        show-word-limit
      />
    </div>

    <div class="payway">
      <div class="container">
        <div class="pay-title">支付方式</div>
        <div class="pay-list">
          <div
            :class="['pay-wx', { activePay: activePayIndex == 1 }]"
            @click="payWayChange(1)"
          >
            <div class="wx-left">
              <span><van-icon name="wechat" /></span>微信支付
            </div>
            <div class="wx-right">微信快捷支付</div>
          </div>
          <div
            :class="['pay-ye', { activePay: activePayIndex == 2 }]"
            @click="payWayChange(2)"
          >
            <div class="ye-left">
              <span><van-icon name="gold-coin" /></span>余额支付
            </div>
            <div class="ye-right">
              可用余额:<span>{{ userInfo.now_money }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pay-money">
      <div class="container">
        <div class="pay-list">
          <div class="pay-left">商品总价:</div>
          <div class="pay-right">¥{{ moneyList.total_price }}</div>
        </div>
        <div class="pay-list">
          <div class="pay-left">运费:</div>
          <div class="pay-right">+¥{{ moneyList.pay_postage }}</div>
        </div>
      </div>
    </div>

    <van-submit-bar
      :price="moneyList.pay_price * 100"
      button-text="立即结算"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapGetters } from "vuex";
import { areaList } from "@vant/area-data";
export default {
  props: {
    goodsId: Array,
  },
  data() {
    return {
      active: 2,
      currentContact: {
        name: "张三",
        tel: "13000000000",
        address: "啦啦啦啦啦啦啦",
        isDefault: false,
      },
      hasDefault: false,
      chosenAddressId: "2",
      list: [],
      showaddress: false,
      sendId: this.$route.query.goodsId,
      confireList: null,
      vipDiscount: 0,
      showdiscount: false,
      areaList,
      editaddress: false,
      addressInfo: {},
      editId: 0,
      liuyan: "",
      activePayIndex: 2,
      payType: "yue",
      orderKey: "",
      moneyList: null,
      jifen: false,
      useIntegral: 0,
      orderId: "",
    };
  },
  created() {
    if (typeof this.sendId == "string") {
      this.$router.push("/cart");
      return;
    }
    this.sendId = this.sendId.join(",");
    this.getAddressList();
    this.$axios
      .post("api/order/confirm", {
        cartId: this.sendId,
      })
      .then((d) => {
        // console.log(d)
        if (d.data.status == 200) {
          this.confireList = d.data.data.cartInfo;
          this.orderKey = d.data.data.orderKey;
          for (let i = 0; i < this.confireList.length; i++) {
            this.vipDiscount += this.confireList[i].vip_truePrice;
          }
        }
        this.vipDiscount = "-¥" + this.vipDiscount;
        // console.log("vipDiscount==>",this.vipDiscount)
        // console.log("订单详情==>", this.confireList);
        // console.log("orderKey==>", this.orderKey);
      });
    setTimeout(() => {
      // console.log("chosenAddressId==>", this.chosenAddressId);
      this.getComputed();
    }, 1000);
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    getComputed() {
      this.$axios
        .post("api/order/computed/" + this.orderKey, {
          addressId: this.chosenAddressId,
          couponId: 0,
          payType: this.payType,
          shipping_type: 1,
          useIntegral: this.useIntegral,
        })
        .then((d) => {
          // console.log("computed==>", d);
          this.moneyList = d.data.data.result;
          // console.log(this.moneyList);
        });
    },
    getAddressList() {
      this.list = [];
      this.$axios.get("api/address/list").then((d) => {
        // console.log(d);
        let arr = d.data.data;
        for (let i = 0; i < arr.length; i++) {
          let o = {
            id: arr[i].id,
            name: arr[i].real_name,
            tel: arr[i].phone,
            isDefault: arr[i].is_default,
            province: arr[i].province,
            city: arr[i].city,
            district: arr[i].district,
            detail: arr[i].detail,
            address: `${arr[i].province}${arr[i].city}${arr[i].district}${arr[i].detail}`,
          };
          if (o.isDefault) {
            this.chosenAddressId = o.id;
            this.currentContact.name = o.name;
            this.currentContact.tel = o.tel;
            this.currentContact.address = o.address;
            this.hasDefault = true;
          }
          this.list.push(o);
        }
        if (this.hasDefault == false) {
          this.currentContact.name = this.list[0].name;
          this.currentContact.tel = this.list[0].tel;
          this.currentContact.address = this.list[0].address;
        }
        // console.log(this.list);
      });
    },
    showAddressList() {
      this.showaddress = true;
    },
    onAdd() {
      // Toast("新增地址");
      // this.$router.push("/editaddress");
      this.editaddress = true;
      this.addressInfo = {};
    },
    onEdit(item) {
      console.log("****************************", item);
      this.editId = 0;
      this.editaddress = true;
      item.isDefault = item.isDefault == 0 ? false : true;
      let areaCode = null;
      for (const index in areaList.county_list) {
        const element = areaList.county_list[index];
        if (element == item.district) {
          areaCode = index;
          break;
        }
      }
      this.addressInfo = {
        addressDetail: item.detail,
        city: item.city,
        county: item.district,
        id: item.id,
        isDefault: item.isDefault,
        name: item.name,
        province: item.province,
        tel: item.tel,
        areaCode: areaCode,
      };
      this.editId = item.id;
      // Toast("编辑地址:" + index);
    },
    changeAddress(item) {
      // console.log(this.chosenAddressId);
      this.currentContact.name = item.name;
      this.currentContact.tel = item.tel;
      this.currentContact.address = item.address;
      this.currentContact.isDefault = item.isDefault;
    },
    showDiscount() {
      this.showdiscount = true;
    },
    onSave(content) {
      console.log("content==>", content);
      let addressList = {
        city: content.city,
        province: content.province,
        district: content.county,
        city_id: 0,
      };
      content.isDefault = content.isDefault == false ? 0 : 1;
      let editID = editID == 0 ? "" : this.editId;
      this.$axios
        .post("api/address/edit", {
          address: addressList,
          detail: content.addressDetail,
          phone: content.tel,
          real_name: content.name,
          is_default: content.isDefault,
          post_code: content.areaCode,
          id: editID,
        })
        .then((d) => {
          // console.log("onSave==>", d);
          if (d.data.status == 200) {
            Toast("保存成功");

            this.getAddressList();
            setTimeout(() => {
              this.editaddress = false;
            }, 1500);
          } else {
            Toast(d.data.msg);
          }
        });
      this.editId = 0;
    },
    onClickDisabled() {
      Toast("暂不支持到店自提");
    },
    onSubmit() {
      this.$axios
        .post("api/order/create/" + this.orderKey, {
          addressId: this.chosenAddressId,
          bargainId: 0,
          combinationId: 0,
          couponId: 0,
          from: "weixinh5",
          mark: "",
          payType: this.payType,
          phone: "",
          pinkId: 0,
          real_name: "",
          seckill_id: 0,
          shipping_type: 1,
          store_id: 0,
          useIntegral: this.useIntegral,
        })
        .then((d) => {
          console.log(d);
          if (d.data.status == 200) {
            this.orderId = d.data.data.result.orderId;
            this.$toast(d.data.msg);
            this.orderDetail();
          }
        });
    },
    orderDetail() {
      this.$axios.get("api/order/detail/" + this.orderId).then((d) => {
        console.log("orderDetail==>", d);
        this.$toast(d.data.data._status._msg);
        this.$router.push({
          path: "/successpay",
          query: { orderinfo: d.data.data },
        });
      });
    },
    delAddressInfo() {
      this.addressInfo = {};
      // console.log(content)
    },
    payWayChange(index) {
      this.activePayIndex = index;
      if (index == 2) {
        this.payType = "yue";
      } else {
        this.payType = "weixin";
      }
      this.getComputed();
    },
    jiFenChange() {
      // console.log(this.jifen);
      if (this.jifen) {
        this.useIntegral = 1;
      } else {
        this.useIntegral = 0;
      }
      this.getComputed();
    },
  },
};
</script>

<style lang="less">
.container {
  padding: 0rem 1rem;
}
.comfire {
  .van-button--danger {
    background-color: #f44939;
    border: 1px solid #f44939;
  }
  .van-field__label {
    color: black;
    width: 4em;
  }
  padding-bottom: 3.15rem;
  & > .container {
    padding: 1rem 1rem;
    background-image: linear-gradient(180deg, #e93323 0, #f5f5f5);
    .currentAddress {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        background-image: -webkit-repeating-linear-gradient(
          135deg,
          #ff6c6c 0,
          #ff6c6c 20%,
          transparent 0,
          transparent 25%,
          #1989fa 0,
          #1989fa 45%,
          transparent 0,
          transparent 50%
        );
        bottom: 0rem;
        left: 0rem;
        height: 0.1rem;
        width: 100%;
        background-size: 5rem;
      }
    }
    .van-tab {
      color: #e93323;
    }
    .van-tabs__nav {
      background-color: rgba(255, 255, 255, 0.5);
    }
    .van-tab--active {
      background-color: white;
    }
    .van-tabs__line {
      background-color: transparent;
    }
  }
  .content {
    padding: 16px 16px 160px;
  }
  .addressList {
  }
  .goodCount {
    font-size: 0.9rem;
    padding: 0.6rem 1rem 0.4rem;
    letter-spacing: 0.05rem;
  }
  .vanCard {
    .van-card {
      .van-card__thumb {
        .van-image {
          img {
            object-fit: contain !important;
          }
        }
      }
    }
  }
  .van-card:not(:first-child) {
    margin-top: 3px;
  }
  .van-card__title {
    font-size: 13px;
    color: black;
    margin-bottom: 5px;
  }
  .cell {
    border-top: 0.5rem solid #f3f3f3;
    border-bottom: 0.5rem solid #f3f3f3;
    .van-cell {
      border-bottom: 0.05rem solid #efefef;
      color: black;
      .jifen {
        color: #e93323;
        margin: 0rem 0.5rem;
      }
      .van-checkbox {
        display: inline-block;
      }
    }
    .jf {
      .van-cell__value {
        display: flex;
        justify-content: flex-end;
      }
    }
    .discount {
      width: 14rem;
      height: 11rem;
      margin: 3rem auto;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
  .van-submit-bar {
    z-index: 1000;
  }
  .van-submit-bar__text {
    text-align: left;
  }
  .payway {
    border-bottom: 0.5rem solid #f3f3f3;
    padding-bottom: 1rem;
    .container {
      .pay-title {
        margin: 1rem 0rem;
      }
      .pay-list {
        font-size: 0.85rem;
        color: #969696;

        .pay-wx {
          display: flex;
          height: 2.5rem;
          line-height: 2.5rem;
          border: 0.06rem solid #dfdfdf;
          margin-bottom: 0.6rem;
          .wx-left {
            text-align: center;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            span {
              height: 1.5rem;
              width: 1.5rem;
              background-color: #41b035;
              display: inline-block;
              border-radius: 50%;
              color: white;
              font-size: 1.2rem;
              margin-right: 0.5rem;
              i {
                display: block;
                margin-top: 0.2rem;
              }
            }
          }
          .wx-right {
            text-align: center;
            flex: 1;
          }
        }
        .pay-ye {
          display: flex;
          height: 2.5rem;
          line-height: 2.5rem;
          border: 0.06rem solid #dfdfdf;
          .ye-left {
            text-align: center;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            span {
              height: 1.5rem;
              width: 1.5rem;
              background-color: #fff;
              display: inline-block;
              border-radius: 50%;
              font-size: 1.6rem;
              margin-right: 0.5rem;
              i {
                display: block;
                color: #fe960f;
              }
            }
          }
          .ye-right {
            text-align: center;
            flex: 1;
            span {
            }
          }
        }
        .activePay {
          border: 0.06rem solid #f44939;
        }
      }
    }
  }
  .pay-money {
    padding: 1rem 0rem;
    border-bottom: 0.5rem solid #f3f3f3;
    .pay-list {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      .pay-left {
      }
      .pay-right {
        color: #969696;
        letter-spacing: 0.1rem;
      }
    }
    .pay-list:nth-child(1) {
      margin-bottom: 0.5rem;
    }
    .van-address-list {
      padding: 12px 12px 0px;
    }
  }
}
</style>